<template>
  <div>
    <el-row v-for="(item, index) in list" :key="index" :gutter="5" class="margin-bottom-16 wft-custom-row">
      <el-col :span="24" class="margin-bot-8 params-bottom-line">
        <el-row>
          <el-col :span="22" class="margin-bot-4">
            <h5>{{ addButtonText.replace('添加', '') + (index + 1) }}</h5>
          </el-col>
          <el-col :span="2" class="margin-bot-4">
            <el-button icon="Delete" link @click="list.splice(index, 1)" class="font-size-14" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="margin-bot-4">
        <el-tooltip effect="dark" content="参数的key" placement="top">
          <el-input v-model="item.name" placeholder="key" />
        </el-tooltip>
      </el-col>
      <el-col :span="24" class="margin-bot-4">
        <el-select v-model="item.type" placeholder="数据值类型" @change="item.value = ''" class="wft-w-100">
          <el-option label="静态数据" value="0" />
          <el-option label="动态数据" value="1" />
          <el-option label="event" value="2" />
          <el-option label="存储数据" value="3" />
        </el-select>
      </el-col>
      <el-col :span="24" class="margin-bot-4">
        <el-tooltip v-if="item.type == '0'" effect="dark" content="传递的静态数据" placement="top">
          <el-input v-model="item.value" placeholder="请输入静态数据" />
        </el-tooltip>
        <PageDataModel v-if="item.type == '1'" v-model="item.value" :panel-json="panelJson" className="wft-w-100" />
        <el-tooltip v-if="item.type == '2'" effect="dark" :content="eventParams ? `可选值：${eventParams}`: '无参数'" placement="top">
          <el-input v-model="item.value" placeholder="请输入数据" />
        </el-tooltip>
        <el-tooltip v-if="item.type == '3'" effect="dark" content="本地存储数据的key" placement="top">
          <el-input v-model="item.value" placeholder="请输入" />
        </el-tooltip>
      </el-col>
    </el-row>
    <el-button class="wft-w-100 margin-bottom-10" @click="addParams()">
      {{ addButtonText }}
      <el-tooltip effect="dark" :content="addButtonText.replace('添加', '')" placement="top">
        <i class="el-icon-info margin-left-4" />
      </el-tooltip>
    </el-button>
  </div>
</template>
<script setup lang='ts'>
import PageDataModel from '../PageDataModel/index.vue'

const props = withDefaults(defineProps<{
  list: TParamItem[],
  panelJson: TPanel,
  eventParams?: string,
  addButtonText?: string
}>(), {
  eventParams: '',
  addButtonText: '添加参数'
})

// 添加参数
function addParams() {
  props.list.push({
    name: '',
    type: '0',
    value: ''
  })
}

</script>